<template>
  <div>
     <h2>{{a}}</h2>
     <h2>{{b}}</h2>
     <h2>{{ c.age }}</h2>
    <h2>{{d}}</h2>
    <button @click="handelClick">点击</button>
  </div>
</template>
<script setup lang="ts">
  import {ref} from "vue";
  let a = '123';
  let b = ref(100);
  let c = ref({
    name:'Lee',
    age:40
  })
  let d = ref([1,2,3])
  // function handelClick() {
  //   console.log(a,b);
  // }
  const handelClick = () => {
    // console.log(b.value);
    // b.value++
    // console.log(c)
    // c.age.value++ 错误
    // c.value.age++
    console.log(d)
    d.value[1] = 555
  }

</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
